<template>
	<view class="page_box">
		<u-navbar id="navbarr" :is-back="true" title="提现" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box">
			<view class="bg-img my-purse flex flex-direction justify-between">
				<view class="money-cont" :style="{top:navbar_height+'px'}">
					<view class="f24 text-white">可提现金额（元）</view>
					<view class="f56 text-white" style="margin-top: 10rpx;">2000</view>
				</view>
				<view class="publishCse flex align-center" :style="{top:navbar_height + 36 +'px'}" @click="withdrawal_record">
					<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_withdraw.png" style="width: 36rpx;height: 32rpx;"></image>
					<text class="f26 margin-left-sm text-white">提现记录</text>
				</view>
			</view>			
			<view class="content-item">
				<view class="price-content flex justify-between flex-wrap">
					<view 
						:class="price_index==index?'text-price price-active':'text-price'" 
						v-for="(item,index) in price_list" 
						:key="index"
						@click="priceBind(index)"
						>
						{{item}}
					</view>
				</view>
			</view>	
			<view class="flex align-center f24" style="padding: 0 32rpx 0;color: #717171;">
				<i class="cuIcon-info margin-right-sm"></i>
				到账可能出现延迟，请注意留意到账情况
			</view>
			<view class="content-item">
				<view class="Withdrawal-content content-item">
					<view class="f28">手动输入</view>
					<view class="flex align-center" style="margin: 50rpx 0;">
						<text class="f34">￥</text>
						<view class="price-input">
							<u-input 
							v-model="price_value" 
							type="number" 
							placeholder="请输入提现金额" 
							placeholder-style="color:#C3C3C3;font-size: 26rpx;"
							 />
						</view>
					</view>
					<view class="flex justify-between">
						<view class="f28">提现方式</view>
						<view class="flex align-center f28">
							<i class="cuIcon-weixin f40" style="color: #19BE6B;margin-right: 16rpx;"></i>微信
						</view>
					</view>
				</view>
				<view class="custom-style" @click="withdrawNow">立即提现</view>
			</view>
		
		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			navbar_height:0,
			title_index:0,
			swiperCurrent:0,
			detailed_list:[{
				header:"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bj.png",
				name:"艾福西西",
				time:"2021.03.29 16:48",
				code:"BF6322",
				content:"+160"
			},{
				header:"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bj.png",
				name:"艾福西西",
				time:"2021.03.29 16:48",
				code:"BF6322",
				content:"+160"
			},{
				header:"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bj.png",
				name:"艾福西西",
				time:"2021.03.29 16:48",
				code:"BF6322",
				content:"+160"
			},],
			windowHeight:0,
			price_value:'',
			price_list:[500,1000,1500,2000,2500,3000],
			price_index:'-1',
		};
	},
	watch:{
		price_value(val){
			if(val == '') this.price_index = '-1'
		}
	},
	onShow() {},
	onLoad(e) {
		var _this = this;
		uni.getSystemInfo({
		    success: function (res) {
				_this.windowHeight = res.windowHeight
		    }
		});
	},
	mounted() {
		const query = uni.createSelectorQuery().in(this);
		query.select('#navbarr').boundingClientRect(data => {
			this.navbar_height = data.height
		}).exec();
	},
	methods: {
		purseTitle(index){
			this.swiperCurrent = index
		},
		swiperchange(index){
			this.title_index = index.detail.current;
		},
		priceBind(index){
			this.price_index = index
			this.price_value = this.price_list[this.price_index]
		},
		withdrawal_record(){
			uni.navigateTo({
				url:'./withdrawal_record'
			})
		},
		//立即提现
		withdrawNow(){
			console.log()
			if(this.price_value != ''){
				uni.showToast({
					title:'提现成功',
					icon:"none"
				})
			}else{
				uni.showToast({
					title:'请输入提现金额',
					icon:"none"
				})
			}			
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/u-navbar {
  position: fixed;
  top: 0;
  transform: translateX(-50%);
  z-index: 99999;
  // background-color: transparent !important;
 }
.page_box {
	width: 100vw;
	height: 100vh;
	background: #F7F7F7 !important;
}
.content_box {	
	.my-purse{
		padding: 50rpx 30rpx;
		width: 100%;
		height: 420rpx;
		position: relative;
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210617180910.png);
		.publishCse{
			position: absolute;
			right: 0;
			background: #BEA06E;
			border-radius: 30rpx 0px 0px 30rpx;
			height: 60rpx;
			padding: 10rpx 38rpx 10rpx 14rpx ;
		}
		.money-cont{
			position: relative;
		}
	}
	.price-content{		
		background: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx 28rpx;
		position: relative;
		margin-top:-100rpx;
		.text-price{
			font-size: 44rpx;
			width: 30.5%;
			border: 1rpx solid #b99559;
			border-radius: 11rpx;
			text-align: center;
			padding: 38rpx 0;
			margin-bottom: 20rpx;
			box-sizing: border-box;
		}
		.price-active{
			border-color: #fdf7ec;
			background: #fdf7ec;
			color: #c39a50;
		}
	}
	.Withdrawal-content{
		background: #ffffff;
		border-radius: 10rpx;
		.price-input{
			width: 100%;
			margin-left: 10rpx;
			padding-left: 20rpx;
			border-bottom: 1rpx solid #F8F8F8;
		}
	}
	.custom-style{
		margin: 150rpx 0 100rpx;
		color: white;
		background: #ddbb82;
		text-align: center;
		border-radius: 60rpx;
		padding: 30rpx 0;
		font-size: 34rpx;
	}
}
</style>
